<template>
      <div class="page-gap">
            <Header :isTransparentBackground="false"></Header>
            <div class="error-area pt-gap-comm flex ali-center jus-center">
                  <div class="error-tips constraint flex ali-center jus-center relative">
                        <p>{{ data.statusCode }}</p>
                        <p>{{ data.statusText }}</p>
                  </div>
            </div>
            <CopyRight></CopyRight>
      </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'

import { useRoute } from 'vue-router'
import { statusCodeList } from '@/utils/statusCode/index'

// 导航栏组件
import Header from '@/components/client/common/header/index.vue';
// 版权组件
import CopyRight from '@/components/client/common/copyright/index.vue';

const route = useRoute()

// error status code 默认值
let data = reactive({
      statusCode: 404,
      statusText: 'Not Found'
})

onMounted(() => {
      let code = route.params.catchAll as unknown as number
      statusCodeList.map(item => {
            if (item.code == code) {
                  data.statusText = item.status_text 
                  data.statusCode = item.code 
            }
      })
      window.document.title = data.statusCode + '-' + data.statusText
})
</script>

<style scoped>
.error-area {
      margin: 30px 0;
      height: 600px;
}
.error-tips {
      display: flex;
      border-radius: 3px;
      background-color: #fff;
      width: 100%;
      font-weight: bold;
      color: rgb(70, 70, 70);
      text-shadow: 0 15px 5px rgba(225, 225, 225, .8);
}

.error-tips::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 30px;
      background: url('@/assets/logo-en.png');
      width: 45%;
      height: 100px;
      background-size: auto 100%;
      background-position: left top;
      background-repeat: no-repeat;
      opacity: .1;
      filter: brightness(50%);
}

.error-tips * {
      font-size: 53px;
}

.error-tips p:nth-child(1)::after {
      content: "";
      border-right: 2px solid rgb(70, 70, 70);
      padding-right: 50px;
      margin-right: 50px;
}
</style>